<template>
	
	<view class="flex-col page">
      <form class="flex-col group">
        <view class="flex-col section">
           
                   <uni-notice-bar show-icon scrollable
                    :text="notice" 
                    class="sms-notice nowrap"
                />
            
            
          <view class="flex-col group_3">
            <view class="flex-col section_2">
              <text class="self-start font text_2">填写信息
                <text style="font-size: 0.81rem;line-height: 0.75rem;color: #ef9406;">(短信发送记录请在 我的-已发短信 查看)</text>
              </text>
              <view class="flex-row justify-between items-center self-stretch group_4">
                <view class="group_5">
                  <text class="font_2">对方手机号</text>
                  <text class="font_2 text_3">*</text>
                </view>
                <input class="text_4" type="number" name="mobile" placeholder="请输入对方手机号" v-model="formData.mobile" />
              </view>
             
           
              <view class="flex-row self-start" style="margin: 20rpx 0">
                <view class="flex-1 self-center group_9 ml-8-5">
                  <text class="font_3 text_8">短信发送失败是因为有敏感词，请联系客服人工帮您发送！</text>
                </view>
              </view>
            
            <view class="mt-12 flex-col section_3">
              <view class="flex-row justify-between items-center group_10">
                <view class="group_11">
                  <text class="font">编辑短信</text>
                  <text class="font text_9">*</text>
                </view>
                <view class="flex-col justify-start items-center text-wrapper">
                  <text class="font_4 text_10" @click="explainLay('wenan')">使用内置文案</text>
                </view>
              </view>
              <view class="flex-col section_4">
                <textarea 
                id="smsText" 
                name="content" 
                class="self-start font_2 text_11" 
                v-model="formData.content" 
                maxlength="500" 
                placeholder="请输入要传达的内容（表白、祝福等）">
                </textarea>
                <!-- text class="self-start font_2 text_11">请输入要传达的内容（表白、祝福等）</text-->
                <text class="self-end font_5" id="smsTextLength">0/500</text>
              </view>
              <view class="group_12">
                <text class="font_4 text_12" id="yuji">预计发送费用：3.5元</text>
                <text class="font_4 text_13" id="danjia">（按照65个字一条，3.5元/条收费）</text>
              </view>
            </view>
            <!-- view class="mt-12 flex-col section_5">
              <text class="self-start font text_14">给我们的备注</text>
              <view class="self-stretch viewider"></view>
              <view class="flex-col self-stretch section_6">
                <text class="self-stretch text_15">
                  例如Ta的称呼/在线时间/在线习惯等，我们将在力所能及的情况下帮你完成
                </text>
                <text class="self-end font_5 mt-26-5">0/500</text>
              </view>
            </view> -->
          </view>
		  </view>
		  </view>
        </form>
        <view class="flex-col relative group_3 view">
          <view class="flex-col justify-start items-center self-stretch text-wrapper_2">
            <text class="text_16 bottonSub" @click="sendSms">确认发送</text>
          </view>
          <text class="self-center font_2 text_17 mt-15-5" @click="explainLay('liulan')">预览短信</text>
        </view>
      </view>
</template>

<script>
	export default {
		  onLoad() {
		    uni.setNavigationBarTitle({
		      title: '写信挽回',
		    });
		  },
		data() {
			return {
				notice:'不知道要滚动什么~~',
        formData:{
           mobile:'',
           content:'',
        }
			}
		},
		methods: {

      explainLay(type) {
    		uni-popup({
					title: '提示',
					content: '提示',
					showCancel: false
				});
      },
      //提交
			sendSms() {
        if(this.formData.mobile.length !== 11){
          uni.showToast({
            title: '手机号格式错误',
            icon: 'error',
          });
          return;

        }
        if(this.formData.content.length === 0){
          uni.showToast({
            title: '短信内容不能为空',
            icon: 'error',
          });
          return;
        }
				console.log('发送短信');
			}
		}
	}
</script>

<style scoped>
@import url("/static/acss/message.css");
@import url("/static/newcss/common.css");
.group{
	height: auto;
}
.page{
	padding-bottom: 120rpx;
}
.section{
	padding-bottom:0;
}
.uni-input-placeholder{
	overflow: visible;
}
.view{
  margin-top: 40rpx;
}
</style>